<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="enterFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
    //定义list变量，接收父传来的值
    props:['list'],
    data(){
        return{
            //同步输入框的值
            task:""
        }
    },
    computed:{
        isAll:{
            //isAll被改变后的值
            set(val){
                console.log(val);
                this.list.forEach(item => { item.isDone = val});
            },
            //初始值
            get(){
                return this.list.every(item => item.isDone)
            }
        }
    },
 methods:{
    //回车键函数
    enterFn(){
        //当用户输入空内容，跳出提示
        if(this.task.trim() === ''){
            alert('请输入内容')
            return
        }
        //向父组件传回车事件
        this.$emit('addFn',this.task)
        //触发回车事件后，将输入框清除
        this.task = ''
    }
 }
}
</script>